<div class="btn-group w-100" ngbDropdown role="group">
    <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
        <svg class="toolbaricon" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
        </svg>
        <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
      <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
    </button>
    <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
        <div class="list-group list-group-flush">
            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
                <div class="selected-icon me-1">
                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.NONE" fill="currentColor" class="buttonicon-sm">
                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
                    </svg>
                </div>
                <div class="me-1">
                    <small i18n>All</small>
                </div>
            </button>
            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
                <div class="selected-icon me-1">
                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.SELF" fill="currentColor" class="buttonicon-sm">
                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
                    </svg>
                </div>
                <div class="me-1">
                    <small i18n>My documents</small>
                </div>
            </button>
            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
                <div class="selected-icon me-1">
                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.NOT_SELF" fill="currentColor" class="buttonicon-sm">
                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
                    </svg>
                </div>
                <div class="me-1">
                    <small i18n>Shared with me</small>
                </div>
            </button>
            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
                <div class="selected-icon me-1">
                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.UNOWNED" fill="currentColor" class="buttonicon-sm">
                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
                    </svg>
                </div>
                <div class="me-1">
                    <small i18n>Unowned</small>
                </div>
            </button>
            <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
                <div class="selected-icon me-1">
                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.OTHERS" fill="currentColor" class="buttonicon-sm">
                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
                    </svg>
                </div>
                <div class="me-1 w-100">
                    <ng-select
                        name="user"
                        class="user-select small"
                        [(ngModel)]="selectionModel.includeUsers"
                        [disabled]="disabled"
                        [clearable]="false"
                        [items]="users"
                        bindLabel="username"
                        multiple="true"
                        bindValue="id"
                        placeholder="Users"
                        i18n-placeholder
                        (change)="onUserSelect()">
                    </ng-select>
                </div>
            </button>
            <div *ngIf="selectionModel.ownerFilter === OwnerFilterType.NONE || selectionModel.ownerFilter === OwnerFilterType.NOT_SELF" class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">
                <div class="form-check form-switch w-100">
                  <input type="checkbox" class="form-check-input" id="hideUnowned" [(ngModel)]="this.selectionModel.hideUnowned" (change)="onChange()" [disabled]="disabled">
                  <label class="form-check-label w-100" for="hideUnowned"><small i18n>Hide unowned</small></label>
                </div>
            </div>
        </div>
    </div>
  </div>
